<template>
  <div class="about_author">
    <div class="card">
      <Card dis-hover>
        <p slot="title" style="height:1rem;line-height:1rem">关于作者</p>
        <!-- 作者信息 -->
        <div class="info_box">
          <router-link :to="{path:'/user/'+this.userInfo.userid}" target="_blank">
            <ul class="author_wrapper">
              <li class="author_logo">
                <img :src="this.userInfo.avatar" :alt="this.userInfo.username" />
              </li>
              <ul class="author_info">
                <li class="author_name" :title="this.userInfo.username">{{this.userInfo.username}}</li>
                <li class="author_email" :title="this.userInfo.email">
                  <Icon type="md-mail" size="16" color="#333" />
                  {{this.userInfo.email}}
                </li>
              </ul>
            </ul>
          </router-link>
        </div>
        <!-- 其余信息 -->
        <div class="other_info">
          <div class="likes_count_box">
            <div class="icon_box">
              <i class="iconfont icon-liulan"></i>
            </div>
            <div class="count_box">
              获得点赞
              <span class="num">{{otherInfo.likeCount}}</span>
            </div>
          </div>
          <div class="views_count_box">
            <div class="icon_box">
              <i class="iconfont icon-like-active-"></i>
            </div>
            <div class="count_box">
              文章阅读总量
              <span class="num">{{otherInfo.viewCount}}</span>
            </div>
          </div>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
export default {
  name: "AboutAuthor",
  data() {
    return {
      userInfo: {},
      otherInfo: {}
    };
  },
  props: {
    userinfo: {
      type: Object
    }
  },
  watch: {
    userinfo(val) {
      this.userInfo = val;
      this.getUserOtherInfo(val.userid);
    }
  },
  methods: {
    getUserOtherInfo(uid) {
      this.$axios
        .get("/get_multi_user", {
          params: {
            uid: uid
          }
        })
        .then(res => {
          this.otherInfo = res.data.data;
        })
        .catch(err => {
          console.log(err.response);
        });
    }
  }
};
</script>

<style lang='scss'>
.about_author {
  position: fixed;
  width: 240px;
  .card {
    padding-bottom: 15px;
    .info_box > a {
      color: #333;
      .author_wrapper {
        display: flex;
        flex-direction: row;
        .author_logo {
          width: 3.5rem;
          height: 3.5rem;

          img {
            width: inherit;
            height: inherit;
            border-radius: 4px;
          }
        }
        .author_info {
          padding-left: 0.5rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          overflow: hidden;
          li {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .author_name {
            flex: 1;
            font-size: 1.2rem;
            font-weight: 700;
          }
        }
      }
    }
    .other_info {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      .likes_count_box {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      .views_count_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 0.5rem;
      }
      .icon_box {
        height: 1.5rem;
        width: 1.5rem;
        margin-right: 0.5rem;
        border-radius: 50%;
        background-color: rgb(225, 239, 255);
        .iconfont {
          font-size: 15px;
          color: rgb(123, 185, 255);
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          line-height: 1;
        }
      }
      .count_box {
        .num {
          margin-left: 0.5rem;
        }
      }
    }
  }
}
</style>